@if (label() || tooltip()) {
  <ix-label
    [label]="label()"
    [tooltip]="tooltip()"
    [required]="required()"
    [ixTestOverride]="controlDirective.name || ''"
  ></ix-label>
}

<div class="input-container" [class.disabled]="isDisabled">
  <div>
    <label
      tabindex="0"
      [attr.aria-label]="'Choose File for {label}' | translate: { label: label() }"
      (keydown.enter)="fileInput.click()"
    >
      <ng-content>
        {{ multiple() ? ('Choose Files' | translate) : ('Choose File' | translate) }}
      </ng-content>
      <input
        #fileInput
        type="file"
        [accept]="acceptedFiles()"
        [ixTest]="controlDirective.name"
        [required]="required()"
        [disabled]="isDisabled"
        [multiple]="multiple()"
        (change)="onChanged(asFileInput($event.target).files)"
      />
    </label>
  </div>
  @if (value && value.length) {
    <div>
      @for (file of value; track trackByIdentity(file)) {
        <p class="file">
          <span
            tabindex="0"
            class="file-action"
            [matTooltip]="'Remove file' | translate"
            (click)="removeFile(file)"
            (keydown.enter)="removeFile(file)"
          >
            <ix-icon name="mdi-close"></ix-icon>
          </span>
          <span class="file-name">{{ file.name }}</span>
          <span class="file-size">{{ formatSize(file.size) }}</span>
        </p>
      }
    </div>
  }
</div>

@let control = controlDirective.control;
@if (control) {
  <ix-errors [control]="control" [label]="label()"></ix-errors>
}
